<template>
	<div class="chart-box" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
	data(){
		return {
			chart: null
		}
	},
	methods:{
		init(){
			this.chart = echarts.init(this.$refs.chart)
		},
		draw(config){
			if(!this.chart) {
				this.init()
			}
			this.chart.setOption(config)
		},
		resize(){
				if(!this.chart) this.init()
				this.chart.resize()
		}
	},
	mounted(){
		this.init()
	},
	beforeDestroy(){
		this.chart && this.chart.dispose()
	}
}
</script>

<style lang="sass" scoped>
.chart-box
	background: #f3f3f3
	border-radius: 8px
</style>
